<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    style="height: 100%;overflow: auto;padding-bottom: 53px;">

    <template slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
          <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0"></a-button>
        </span>
      </div>

    </template>
    <div v-loading="result.loading">
      <a-spin :spinning="confirmLoading">
        <a-form-model ref="form" :model="model" :rules="validatorRules">

          <a-form-model-item label="用户账号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="username">
            <a-input placeholder="请输入用户账号" v-model="model.username" :readOnly="!!model.id"/>
          </a-form-model-item>

          <template v-if="!model.id">
            <a-form-model-item label="登录密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="password">
              <a-input type="password" placeholder="请输入登录密码" v-model="model.password"/>
            </a-form-model-item>

            <a-form-model-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="confirmpassword">
              <a-input type="password" @blur="handleConfirmBlur" placeholder="请重新输入登录密码"
                       v-model="model.confirmpassword"/>
            </a-form-model-item>
          </template>

          <a-form-model-item label="用户姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="realname">
            <a-input placeholder="请输入用户姓名" v-model="model.realname"/>
          </a-form-model-item>

          <!--<a-form-model-item label="工号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workNo">-->
          <!--<a-input placeholder="请输入工号" v-model="model.workNo" />-->
          <!--</a-form-model-item>-->

          <!--<a-form-model-item label="职务" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
          <!--<j-select-position placeholder="请选择职务" :multiple="false" v-model="model.post"/>-->
          <!--</a-form-model-item>-->

          <a-form-model-item label="角色分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!roleDisabled">
            <j-multi-select-tag
              :disabled="disableSubmit"
              v-model="model.selectedroles"
              :options="rolesOptions"
              placeholder="请选择角色">
            </j-multi-select-tag>
          </a-form-model-item>

          <!--部门分配-->
          <a-form-model-item label="部门分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!departDisabled">
            <j-select-depart v-model="model.selecteddeparts" :multi="true" @back="backDepartInfo"
                             :backDepart="true"></j-select-depart>
          </a-form-model-item>

          <!--租户分配-->
          <!--<a-form-model-item label="租户分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!departDisabled">-->
          <!--<j-multi-select-tag-->
          <!--:disabled="disableSubmit"-->
          <!--v-model="model.relTenantIds"-->
          <!--:options="tenantsOptions"-->
          <!--placeholder="请选择租户">-->
          <!--</j-multi-select-tag>-->
          <!--</a-form-model-item>-->

          <!--<a-form-model-item label="身份" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
          <!--<a-radio-group  v-model="model.userIdentity"  @change="identityChange">-->
          <!--<a-radio :value="1">普通用户</a-radio>-->
          <!--<a-radio :value="2">上级</a-radio>-->
          <!--</a-radio-group>-->
          <!--</a-form-model-item>-->
          <!--<a-form-model-item label="负责部门" :labelCol="labelCol" :wrapperCol="wrapperCol"  v-if="departIdShow==true">-->
          <!--<j-multi-select-tag-->
          <!--:disabled="disableSubmit"-->
          <!--v-model="model.departIds"-->
          <!--:options="nextDepartOptions"-->
          <!--placeholder="请选择负责部门">-->
          <!--</j-multi-select-tag>-->
          <!--</a-form-model-item>-->

          <!--<a-form-model-item label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
          <!--<j-image-upload class="avatar-uploader" text="上传" v-model="model.avatar" ></j-image-upload>-->
          <!--</a-form-model-item>-->
          <a-form-model-item label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="avatar">
            <div class="user-info-head" @click="editCropper(model)">
              <img v-if="model.avatar==null" v-bind:src="avatars" title="点击上传头像" class="img-circle img-lg"/>
              <img v-if="model.avatar!=null" v-bind:src="model.avatar" title="点击上传头像" class="img-circle img-lg"/>
            </div>
          </a-form-model-item>

          <!--<a-form-model-item label="生日" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
          <!--<a-date-picker-->
          <!--style="width: 100%"-->
          <!--placeholder="请选择生日"-->
          <!--v-model="model.birthday"-->
          <!--:format="dateFormat"-->
          <!--:getCalendarContainer="node => node.parentNode"/>-->
          <!--</a-form-model-item>-->

          <!--<a-form-model-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
          <!--<a-select  v-model="model.sex"  placeholder="请选择性别" :getPopupContainer= "(target) => target.parentNode">-->
          <!--<a-select-option :value="1">男</a-select-option>-->
          <!--<a-select-option :value="2">女</a-select-option>-->
          <!--</a-select>-->
          <!--</a-form-model-item>-->

          <a-form-model-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="email">
            <a-input placeholder="请输入邮箱" v-model="model.email"/>
          </a-form-model-item>

          <a-form-model-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone">
            <a-input placeholder="请输入手机号码" v-model="model.phone"/>
          </a-form-model-item>

          <!--<a-form-model-item label="座机" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="telephone">-->
          <!--<a-input placeholder="请输入座机" v-model="model.telephone" />-->
          <!--</a-form-model-item>-->

          <!--<a-form-model-item label="工作流引擎" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
          <!--<j-dict-select-tag  v-model="model.activitiSync"  placeholder="请选择是否同步工作流引擎" :type="'radio'" dictCode="activiti_sync"/>-->
          <!--</a-form-model-item>-->

        </a-form-model>


      </a-spin>

      <el-dialog :visible.sync="open1" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
        <el-row>
          <el-col :xs="24" :md="12" :style="{height: '350px'}">
            <vue-cropper
              ref="cropper"
              :img="options.img"
              :info="true"
              :autoCrop="options.autoCrop"
              :autoCropWidth="options.autoCropWidth"
              :autoCropHeight="options.autoCropHeight"
              :fixedBox="options.fixedBox"
              @realTime="realTime"
              v-if="displayed"
            />
          </el-col>
          <el-col :xs="24" :md="12" :style="{height: '350px'}">
            <div class="avatar-upload-preview">
              <img :src="previews.url" :style="previews.img"/>
            </div>
          </el-col>
        </el-row>
        <br/>
        <el-row>
          <el-col :lg="2" :md="2">
            <el-upload action="#" :http-request="requestUpload" :show-file-list="false"
                       :on-success="handleAvatarSuccess" :before-upload="beforeUploads">
              <el-button size="small">
                选择
                <i class="el-icon-upload el-icon--right"></i>
              </el-button>
            </el-upload>
          </el-col>
          <el-col :lg="{span: 1, offset: 2}" :md="2">
            <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
          </el-col>
          <el-col :lg="{span: 1, offset: 1}" :md="2">
            <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
          </el-col>
          <el-col :lg="{span: 1, offset: 1}" :md="2">
            <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
          </el-col>
          <el-col :lg="{span: 1, offset: 1}" :md="2">
            <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
          </el-col>
          <el-col :lg="{span: 2, offset: 6}" :md="2">
            <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
          </el-col>
        </el-row>
      </el-dialog>

    </div>
    <div class="drawer-bootom-button" v-show="!disableSubmit">
      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </div>
  </a-drawer>
</template>

<script>
  import moment from 'moment'
  import Vue from 'vue'
  import {ACCESS_TOKEN} from "@/store/mutation-types"
  import {getAction, UploadAvatar} from '@/api/manage'
  import {addUser, editUser, queryUserRole, queryall} from '@/api/api'
  import {disabledAuthFilter} from "@/utils/authFilter"
  import {duplicateCheck} from '@/api/api'
  import {VueCropper} from "vue-cropper";
  import {v4 as uuidv4} from 'uuid';
  import {Message} from 'element-ui';

  export default {
    name: "UserModal",
    components: {
      VueCropper
    },
    data() {
      return {
        //头像
        // 是否显示弹出层
        open1: false,
        // 是否显示cropper
        displayed: false,
        // 弹出层标题
        ss: [],
        avatars: "http://10.0.0.121:31001/avatar/2024-05-11/4d58f87c48414cb38cc41cf841cc51b4.jpeg",
        imageUrl: "",
        options: {
          img: "", //裁剪图片的地址
          autoCrop: true, // 是否默认生成截图框
          autoCropWidth: 200, // 默认生成截图框宽度
          autoCropHeight: 200, // 默认生成截图框高度
          fixedBox: true // 固定截图框大小 不允许改变
        },
        previews: {},
        result: {},
        departDisabled: false, //是否是我的部门调用该页面
        roleDisabled: false, //是否是角色维护调用该页面
        modalWidth: 800,
        drawerWidth: 700,
        modaltoggleFlag: true,
        confirmDirty: false,
        userId: "", //保存用户id
        userIds: "", //保存用户头像id
        disableSubmit: false,
        dateFormat: "YYYY-MM-DD",
        validatorRules: {
          username: [{required: true, message: '请输入用户账号!'},
            {min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur'},
            {pattern: /^[^\u4e00-\u9fa5]+$/, message: '不支持特殊字符', trigger: 'blur'},
            {validator: this.validateUsername,}],
          password: [{
            required: false,
            pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,
            message: '密码由8位数字、大小写字母和特殊符号组成!'
          },
            {validator: this.validateToNextPassword, trigger: 'change'}],
          confirmpassword: [{required: true, message: '请重新输入登录密码!',},
            {validator: this.compareToFirstPassword,}],
          realname: [{required: true, message: '请输入用户名称!'}],
          email: [{validator: this.validateEmail},
            {required: true, message: '请输入邮箱!'}],
          roles: {},

        },
        departIdShow: false,
        title: "操作",
        visible: false,
        s: 1,
        model: {},
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        uploadLoading: false,
        confirmLoading: false,
        headers: {},
        url: {
          fileUpload: window._CONFIG['domianURL'] + "/sys/common/upload",
          userWithDepart: "/sys/user/userDepartList", // 引入为指定用户查看部门信息需要的url
          userId: "/sys/user/generateUserId", // 引入生成添加用户情况下的url
          syncUserByUserName: "/act/process/extActProcess/doSyncUserByUserName",//同步用户到工作流
          queryTenantList: '/sys/tenant/queryList'
        },
        tenantsOptions: [],
        rolesOptions: [],
        nextDepartOptions: [],
      }
    },
    created() {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token": token}
      this.initRoleList()
      this.initTenantList()
    },
    computed: {
      uploadAction: function () {
        return this.url.fileUpload;
      }
    },
    methods: {
      // 编辑头像
      editCropper(form) {
        this.options.img = form.avatar
        console.info("-------this.options.img------" + JSON.stringify(this.options.img))
        this.userIds = form.id
        console.info("-------this.userId------" + JSON.stringify(this.userIds))
        this.open1 = true;
      },

      // 打开弹出层结束时的回调
      modalOpened() {
        this.displayed = true;
      },
      // 覆盖默认的上传行为
      requestUpload() {
      },
      // 向左旋转
      rotateLeft() {
        this.$refs.cropper.rotateLeft();
      },
      // 向右旋转
      rotateRight() {
        this.$refs.cropper.rotateRight();
      },
      // 图片缩放
      changeScale(num) {
        num = num || 1;
        this.$refs.cropper.changeScale(num);
      },
      // 上传预处理
      beforeUploads(file) {
        console.info("-------file------" + JSON.stringify(file.type))
        if (file.type.indexOf("image/") == -1) {
          this.$error("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
        } else {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          console.info("-------上传预处理------" + JSON.stringify(reader.result))
          reader.onload = () => {
            this.options.img = reader.result;
          };
        }
      },
      handleAvatarSuccess(res, file) {
        console.info("------file-----" + JSON.stringify(file))
        this.imageUrl = URL.createObjectURL(file.raw);
        console.info("-------this.imageUrl------" + JSON.stringify(this.imageUrl))
      },
      // 上传图片
      uploadImg() {
        this.model.avatar = this.previews.url
        this.$refs.cropper.getCropBlob(data => {
          this.ss = data;
          console.info("-------this.ss-----" + JSON.stringify(this.ss))
          this.s = 0;
        });
        this.open1 = false;
      },

      uploadImgs(userId) {
        const that = this;
        let formData = new FormData();
        formData.append("avatarfile", this.ss);
        console.info("-------form------" + JSON.stringify(userId))
        UploadAvatar(userId, formData).then(response => {
          this.displayed = false;
          this.s = 1;
          that.$emit('ok');
        });
      },

      // 实时预览
      realTime(data) {
        console.info("-------实时预览data------" + JSON.stringify(data))
        this.previews = data;
      },
      // 关闭窗口
      closeDialog() {
        this.displayed = false;
      },


      add() {
        this.refresh();
        this.edit({activitiSync: '1', userIdentity: 1});
      },
      edit(record) {
        let that = this;
        that.visible = true;
        //根据屏幕宽度自适应抽屉宽度
        this.resetScreenSize();
        that.userId = record.id;
        that.model = Object.assign({}, {selectedroles: '', selecteddeparts: ''}, record);
        console.log("2021" + this.model.selectedroles);
        console.log("2021" + this.model.selecteddeparts);
        //身份为上级显示负责部门，否则不显示
        if (this.model.userIdentity == 2) {
          this.departIdShow = true;
        } else {
          this.departIdShow = false;
        }

        if (record.hasOwnProperty("id")) {
          that.getUserRoles(record.id);
          that.getUserDeparts(record.id);
        }
        console.log('that.model=', that.model)
      },
      isDisabledAuth(code) {
        return disabledAuthFilter(code);
      },
      //窗口最大化切换
      toggleScreen() {
        if (this.modaltoggleFlag) {
          this.modalWidth = window.innerWidth;
        } else {
          this.modalWidth = 800;
        }
        this.modaltoggleFlag = !this.modaltoggleFlag;
      },
      // 根据屏幕变化,设置抽屉尺寸
      resetScreenSize() {
        let screenWidth = document.body.clientWidth;
        if (screenWidth < 500) {
          this.drawerWidth = screenWidth;
        } else {
          this.drawerWidth = 700;
        }
      },
      //初始化租户字典
      initTenantList() {
        getAction(this.url.queryTenantList).then(res => {
          if (res.success) {
            this.tenantsOptions = res.result.map((item, index, arr) => {
              let c = {label: item.name, value: item.id + ""}
              return c;
            })
            console.log('this.tenantsOptions: ', this.tenantsOptions)
          }
        })
      },
      //初始化角色字典
      initRoleList() {
        queryall().then((res) => {
          if (res.success) {
            this.rolesOptions = res.result.map((item, index, arr) => {
              let c = {label: item.roleName, value: item.id}
              return c;
            })
            console.log('this.rolesOptions: ' + JSON.stringify(this.rolesOptions))
          }
        });
      },
      getUserRoles(userid) {
        queryUserRole({userid: userid}).then((res) => {
          if (res.success) {
            this.model.selectedroles = res.result.join(",");
            console.log('====that.model.selectedroles=' + JSON.stringify(this.model.selectedroles))
          }
        });
      },
      getUserDeparts(userid) {
        let that = this;
        getAction(that.url.userWithDepart, {userId: userid}).then((res) => {
          if (res.success) {
            let departOptions = [];
            let selectDepartKeys = []
            for (let i = 0; i < res.result.length; i++) {
              selectDepartKeys.push(res.result[i].key);
              //新增负责部门选择下拉框
              departOptions.push({
                value: res.result[i].key,
                label: res.result[i].title
              })
            }
            that.model.selecteddeparts = selectDepartKeys.join(",")
            that.nextDepartOptions = departOptions;
            console.log('that.nextDepartOptions=', that.nextDepartOptions)
          }
        })
      },
      backDepartInfo(info) {
        this.model.departIds = this.model.selecteddeparts;
        console.log(this.model.departIds);
        console.log(info);
        this.nextDepartOptions = info.map((item, index, arr) => {
          let c = {label: item.text, value: item.value + ""}
          console.log(c);
          return c;
        })
      },
      refresh() {
        this.userId = ""
        this.nextDepartOptions = [];
        this.departIdShow = false;
      },
      close() {
        this.$emit('close');
        this.visible = false;
        this.disableSubmit = false;
        this.nextDepartOptions = [];
        this.departIdShow = false;
        this.$refs.form.resetFields();
      },
      moment,
      handleSubmit() {
        const that = this;
        if (!this.model.avatar) {
          console.info("------avatar-----" + JSON.stringify(this.model.avatar))
          Message({
            message: '头像不能为空，请先上传头像。',
            type: 'warning'
          });
        } else {
          // 触发表单验证
          this.$refs.form.validate(valid => {
            if (valid) {
              that.confirmLoading = true;
              //如果是上级择传入departIds,否则为空
              if (this.model.userIdentity !== 2) {
                this.model.departIds = "";
              }
              let obj;
              console.info("------this.model.avatar-----" + JSON.stringify(this.model.avatar))
              if (!this.model.id) {
                this.model.id = uuidv4();
                console.info("-------this.model.id-----" + JSON.stringify(this.model.id))
                obj = addUser(this.model);
              } else {
                if (this.s == 0) {
                  this.model.avatar = ""
                  obj = editUser(this.model);
                } else {
                  obj = editUser(this.model);
                }
              }
              obj.then((res) => {
                if (res.success) {
                  that.$message.success(res.message);
                  if (this.s == 1) {
                    that.$emit('ok');
                  }
                } else {
                  that.$message.warning(res.message);
                }
              }).finally(() => {
                if (this.s == 0) {
                  this.uploadImgs(this.model.id);
                }
                that.confirmLoading = false;
                that.close();
              })
            } else {
              return false;
            }
          })
        }
      },
      handleCancel() {
        this.close()
      },
      validateToNextPassword(rule, value, callback) {
        const confirmpassword = this.model.confirmpassword;
        if (value && confirmpassword && value !== confirmpassword) {
          callback('两次输入的密码不一样！');
        }
        if (value && this.confirmDirty) {
          this.$refs.form.validateField(['confirmpassword']);
        }
        callback();
      },
      compareToFirstPassword(rule, value, callback) {
        if (value && value !== this.model.password) {
          callback('两次输入的密码不一样！');
        } else {
          callback()
        }
      },
      validatePhone(rule, value, callback) {
        if (!value) {
          callback()
        } else {
          if (new RegExp(/^1[3|4|5|7|8|9][0-9]\d{8}$/).test(value)) {
            var params = {
              tableName: 'sys_user',
              fieldName: 'phone',
              fieldVal: value,
              dataId: this.userId
            };
            duplicateCheck(params).then((res) => {
              if (res.success) {
                callback()
              } else {
                callback("手机号已存在!")
              }
            })
          } else {
            callback("请输入正确格式的手机号码!");
          }
        }
      },
      validateEmail(rule, value, callback) {
        if (!value) {
          callback()
        } else {
          if (new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(value)) {
            var params = {
              tableName: 'sys_user',
              fieldName: 'email',
              fieldVal: value,
              dataId: this.userId
            };
            duplicateCheck(params).then((res) => {
              console.log(res)
              if (res.success) {
                callback()
              } else {
                callback("邮箱已存在!")
              }
            })
          } else {
            callback("请输入正确格式的邮箱!")
          }
        }
      },
      validateUsername(rule, value, callback) {
        var params = {
          tableName: 'sys_user',
          fieldName: 'username',
          fieldVal: value,
          dataId: this.userId
        };
        duplicateCheck(params).then((res) => {
          if (res.success) {
            callback()
          } else {
            callback("用户名已存在!")
          }
        })
      },
      validateWorkNo(rule, value, callback) {
        var params = {
          tableName: 'sys_user',
          fieldName: 'work_no',
          fieldVal: value,
          dataId: this.userId
        };
        duplicateCheck(params).then((res) => {
          if (res.success) {
            callback()
          } else {
            callback("工号已存在!")
          }
        })
      },
      handleConfirmBlur(e) {
        const value = e.target.value;
        this.confirmDirty = this.confirmDirty || !!value
      },
      beforeUpload: function (file) {
        var fileType = file.type;
        if (fileType.indexOf('image') < 0) {
          this.$message.warning('请上传图片');
          return false;
        }
        //TODO 验证文件大小
      },
      identityChange(e) {
        if (e.target.value === 1) {
          this.departIdShow = false;
        } else {
          this.departIdShow = true;
        }
      }
    }
  }
</script>

<style scoped>
  .avatar-uploader > .ant-upload {
    width: 104px;
    height: 104px;
  }

  .ant-upload-select-picture-card i {
    font-size: 49px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .drawer-bootom-button {
    position: absolute;
    bottom: -8px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }

  .img-circle {
    /*border-radius: 50%;*/
  }

  .img-lg {
    width: 90px;
    height: 90px;
  }

  .user-info-head {
    position: relative;
    display: inline-block;
    height: 90px;
  }

  .user-info-head:hover:after {
    content: '+';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    color: #f0f2f5;
    background: rgba(0, 0, 0, 0.5);
    font-size: 24px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: pointer;
    line-height: 90px;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }

  .avatar-upload-preview {
    position: absolute;
    top: 50%;
    transform: translate(50%, -50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow: 0 0 4px #ccc;
    overflow: hidden;
  }
</style>